/* Structure
-------------------------------------------------------------- */

html, body {
	height: 100%;
	background: #525C66;
	color: #eee;
}

#wrap {
	margin: 0 auto -180px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
#container {
	height: 100%;
}
.container {
	padding: 40px 0;
}
.push, #footer {
	height: 180px;
	overflow: hidden;
}

/* Common use
-------------------------------------------------------------- */

.floatsx { float: left; }
.floatdx { float: right; }
.clear { clear: both; }
.justified { text-align: justify; }
.mid { margin-bottom: -3px; }
.rel { position: relative; }
.rbg { background: #ff0000; }
.gbg { background: #00ff00; }
.bbg { background: #0000ff; }
.txtsx { text-align: left; }
.txtdx { text-align: right; }
.txtmid { text-align: center; }
.uppercase { text-transform: uppercase; }
.red { color: #f00; }
.green { color: #0f0; }



/* App
-------------------------------------------------------------- */

.playback-controls {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	width: 180px;
	margin: 0 0 0 -90px;
	text-align: center;
}

#currentartist, #currentsong, #currentalbum, #format-bitrate, #elapsed, #countdown-display {
	display: block;
}
#currentartist, #currentalbum {
	font-size: 18px;
}
#currentalbum {
	margin-bottom: 5px;
}
#currentsong {
	font-size: 30px;
	font-weight: bold;
	color: #4BBE87;
}
#playlist-position, #format-bitrate {
	color: #8FA7BF;
}
#timeknob {
	position: relative;
	padding: 30px 0 13px;
}
#timeknob.pulse, #timeflow.pulse {		
	box-shadow: 0 0 0 0 rgba(0,0,0,0.2);
	background-color: #fff;
	-webkit-transition: box-shadow 0s ease-in-out, background-color .9s ease-in-out;
	-moz-transition: box-shadow 0s ease-in-out, background-color .9s ease-in-out;
	-o-transition: box-shadow 0s ease-in-out, background-color .9s ease-in-out;
	-ms-transition: box-shadow 0s ease-in-out, background-color .9s ease-in-out;
	transition: box-shadow 0s ease-in-out, background-color .9s ease-in-out;
}
#countdown, #time {
    position: relative;
}
#time {
	visibility: hidden;
}
#countdown {
	height: 200px;
	color: #fff;
}
#countdown div {
	margin: 0 auto;
}
#countdown-display {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 120px;
	margin: -5px 0 0 -60px;
	font-size: 20px;
	line-height: 20px;
	font-weight: bold;
}
#total {
	position: absolute;
	top: 68%;
	left: 50%;
	width: 60px;
	margin: -10px 0 0 -30px;
}
#days-sub {
    left: 80px;
}
#hours-sub {
    left: 250px;
}
#mins-sub {
    left: 405px;
}
#secs-sub {
    left: 555px;
}

.volume {
	padding-top: 30px;
}
.volume .btn-toolbar {
	margin-top: 20px;
}
.volumeknob {
	width: 200px;
	height: 200px;
}
#volume {
	font-family: inherit !important;
}
.manual-edit-confirm {
	margin-bottom: 20px;
}



/* Menu top
-------------------------------------------------------------- */

#menu-top, #menu-bottom {
	position: fixed;
	left: 0;
	right: 0;
	height: 40px;
	line-height: 40px;
	background: #7A848E;
	color: #fff;
	z-index: 1000;
}
#menu-top {
	top: 0;
}
#menu-top .home {
	padding: 0 20px;
	line-height: 40px;
	font-weight: bold;
}
#menu-top .dropdown {
	display: block;
	float: right;
	height: 40px;
	line-height: 40px;
	margin: 0 20px 0 0;
}
#menu-top .dropdown-menu,
#context-menus .dropdown-menu {
	float: right;
	position: absolute;
	left: auto;
	background: transparent;
	border: none;
    border-radius: 0px;
    box-shadow: none;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#menu-top .dropdown-menu {
	right: -20px;
	min-width: 160px;
    top: 100%;
    z-index: 1000;
}
#context-menus .dropdown-menu {
	padding-right: 25px;
	min-width: 160px;
}
#menu-top .dropdown-menu > li > a,
#context-menus .dropdown-menu > li > a {
    line-height: 40px;
    margin: 0;
	padding: 0 10px;
	background: #7A848E;
	border-bottom: 0px solid #000;
}
#context-menus .dropdown-menu > li > a {
	border-left: 0px solid #000;
	border-right: 0px solid #000;
}
#menu-top .dropdown-menu > li:first-child > a,
#context-menus .dropdown-menu > li:first-child > a {
	border-top: 0px solid #000;
}
#menu-top .dropdown-menu > li > a:hover,
#menu-top .dropdown-menu > li > a:focus,
#menu-top .dropdown-menu > li.active > a,
#context-menus .dropdown-menu > li > a:hover,
#context-menus .dropdown-menu > li.active > a {
	background: #4BBE87;
}
#menu-top a, #context-menus .dropdown-menu a {
	font-size: 16px;
	text-decoration: none;
	color: #fff;
}
#menu-top a:hover, #menu-top a:focus,
#context-menus .dropdown-menu a:hover,
#context-menus .dropdown-menu a:focus {
	text-decoration: none;
	outline: none;
	color: #fff;
}

.logo {
	margin: -3px 5px 0 -5px;
}
#menu-top .dropdown i,
#context-menus i {
	display: inline-block;
	width: 16px;
	text-align: center;
}



/* Menu bottom
-------------------------------------------------------------- */

#menu-bottom {
	bottom: 0;
}
#menu-bottom ul {
	display: block;
	/*max-width: 500px;*/
	margin: 0 auto;
	padding: 0;
}
#menu-bottom li {
	display: block;
	margin: 0;
	padding: 0;
}
#menu-bottom li.active a {
	background: #4BBE87;
}
#menu-bottom a {
	display: block;
	float: left;
	width: 33.333%;
	line-height: 40px;
	margin: 0;
	padding: 0;
	background: #7A848E;
	font-size: 16px;
	text-decoration: none;
	text-align: center;
	color: #fff;
}
#menu-bottom a:hover, #menu-bottom a:focus {
	text-decoration: none;
	outline: none;
	color: #fff;
}
#menu-bottom .odd {
	background: #273B4F;
}



/* Playback panel
-------------------------------------------------------------- */

#playback {
	padding: 40px 0;
}
#timeknob, #timeflow {
	background-color: #525C66;
}
#timeknob.pulse, #timeflow.pulse {
	box-shadow: 0 0 0 0 rgba(255,255,255,0.3);
	background-color: #222;
}
a.btn-cmd {
	width: 18px;
}
.btn-cmd:focus {
	outline: none;
}



/* Playlist and database panels
-------------------------------------------------------------- */

#playlist, #database {
	padding: 80px 0;
	background: #525C66;
}
.playlist, .database {
	display: block;
	margin: 00 0 125px 0;
	padding: 0;
	list-style: none;
	counter-reset: item;
}
.playlist li, .database li {
	display: block;
	position: relative;
	height: 49px;
	margin: 0;
	background: #525C66;
	border-bottom: 1px solid #fff;
	color: #ddd;
	cursor: pointer;
	font-size: 18px;
	text-align: left;
	font-weight: bold;
}
.playlist li:before {
	display: block;
	float: left;
	width: 30px;
	height: 29px;
	padding: 15px 10px 5px 5px;
	text-align: right;
	counter-increment: item;
	content: counter(item) '. ';
	color: #34495E;
}
.playlist span, .database span { /* era: .playlist li span, .database li span */
	display: block;
	font-size: 12px;
	font-weight: normal;
	color: #8FA7BF;
}
.playlist .active, .database .active { /* era: .playlist li.active, .database li.active */
	color: #fff;
	background: #4BBE87;
}
.playlist .active span, .database .active span { /* era: .playlist li.active span, .database li.active span */
	color: #34495E;
}
.playlist .pl-entry, .database .db-entry {
	margin-right: 70px; /* era: right: 70px; */
	height: 39px;
	padding: 5px 10px;
	white-space: nowrap;
}
.database .db-folder, .database .db-other, .database .levelup {
	line-height: 39px;
}
.database .db-icon {
	display: block;
	float: left;
	height: 19px;
	line-height: 19px;
	padding: 15px 0 5px 10px;
	color: #34495E;
}
.songtime {
	padding-left: 10px;
	font-size: 14px;
	font-style: normal;
	color: #34495E;
}
.icon-root {
	color: #fff;
}
.playlist .pl-action, .database .db-action {
	float: right;
	height: 49px;
	line-height: 49px;
	padding: 0 10px;
}
.playlist .pl-action a, .playlist .db-action a {
	position: relative;
	font-weight: normal;
	text-decoration: none;
}
#db-0 {
	background: #111D29;
}
.database .search-results i {
	color: #ddd;
}
.database .search-results .db-entry {
	color: #8FA7BF;
}
.keyword {
	font-weight: bold;
	color: #4BBE87;
}
#pl-filter-results {
	margin: 0 30px 0 10px;
	line-height: 40px;
	font-size: 16px;
}
#db-0 em, #pl-filter-results i {
	color: #34495E;
}
#db-search-keyword, #pl-filter, #pl-saveName {
	width: 126px;
	height: 20px;
}

.btnlist {
	position: fixed;
	left: 0;
	right: 0;
	display: block;
	width: auto;
	height: 40px;
	padding: 0;
	background: #525C66;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	z-index: 999;
}
.btnlist:focus {
	outline: none;
}
.btnlist.pl-prevPage, .btnlist.db-prevPage,
.btnlist.pl-firstPage, .btnlist.db-firstPage,
.btnlist.btnlist-top {
	top: 40px;
	padding: 0 10px;
	border-top: 0px solid #1B2D3F;
}
.btnlist.pl-nextPage, .btnlist.db-nextPage,
.btnlist.pl-lastPage, .btnlist.db-lastPage,
.btnlist.btnlist-bottom {
	bottom: 40px;
	padding: 0 10px;
	border-bottom: 0px solid #1B2D3F;
}
#db-browse .dropdown {
	display: block;
	height: 40px;
	line-height: 40px;
	margin: 0 20px 0 0;
}
#db-browse .dropdown-menu {
	background: transparent;
	border: none;
    border-radius: 0px;
    box-shadow: none;
    list-style: none outside none;
    margin: 0;
    min-width: 100px;
    padding: 0;
	border-top: 1px solid #000;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
    position: absolute;
    top: 100%;
    z-index: 1000;
}
#db-browse .dropdown-menu > li > a {
    line-height: 40px;
    margin: 0;
	padding: 0 10px;
	background: #34495E;
	border-bottom: 0px solid #000;
	color: #fff;
}
#db-browse .dropdown-menu > li > a:hover,
#db-browse .dropdown-menu > li > a:focus,
#db-browse .dropdown-menu > li.active > a {
	background: #4BBE87;
}
.btnlist a {
	font-size: 16px;
	text-decoration: none;
	color: #fff;
}
.btnlist a:hover, .btnlist a:focus {
	text-decoration: none;
	outline: none;
	color: #fff;
}
.btnlist.btnlist-bottom .btn {
	margin-top: 6px;
}
#db-search, #pl-search {
	display: block;
	float: right;
	margin: 6px 0 0 20px;
	z-index: 1001;
}
#pl-save {
        display: block;
        float: right;
        margin-left: 20px;
        z-index: 1001;
}

#clearqueue {
        display: block;
        float: right;
        margin-right: 10px;
        z-index: 1001;
}
#pl-save input {
	margin-top: 6px;
        padding: 2px 0 2px 10px;
        -webkit-border-top-right-radius: 0px;
        -webkit-border-bottom-right-radius: 0px;
        -moz-border-radius-topright: 0px;
        -moz-border-radius-bottomright: 0px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
}
#db-search input, #pl-search input {
	margin: 0;
	padding: 2px 0 2px 10px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}
#db-browse {
	margin: 0;
	width: 200px;
}
#db-controls, #pl-controls {
	float: right;
}
#db-currentpath {
	line-height: 40px;
}

#panel-dx .btn.disabled, #panel-dx .btn[disabled],
#panel-sx .btn.disabled, #panel-sx .btn[disabled] {
    background-color: #34495E;
    color: white;
}

#db-back {
        display: none;
        margin: 6px 0 0 -6px;
}

#db-back .btn {
    color: #DDDDDD;
    font-size: 18px;
    font-weight: bold;
}
#webradio-add {
    margin: 0px 0 0px 0px;
    float: right;
}



/* Pages */
.pl-pages {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	text-align: center;
}
.pl-pages li {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 4px;
	text-indent: -999px;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.pl-pages li:hover {
	background: #aaa;
}
.pl-pages li.active {
	background: #666;
}



/* Credits
-------------------------------------------------------------- */

.help, .credits {
	font-size: 16px;
	line-height: 24px;
}
.socialsh-buttons a {
	padding: 10px 15px;
}
.socialsh-buttons a i {
	display: inline-block;
	width: 34px;
	font-size: 34px;
}


/* Loading Layer
-------------------------------------------------------------- */

#loader {
	position: fixed;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
	height: 100%;
	z-index: 99999;
	display: none;
}
#lib-loader {
	display: none;
}
#loaderbg {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	text-align: center;
	background: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
}
#loadercontent {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -70px 0 0 -50px;
	width: 100px;
	height: 120px;
	line-height: 40px;
	text-align: center;
	text-transform: uppercase;
	color: #999;
}
#loadercontent i {
	display: block;
	line-height: 100px;
	font-size: 100px;
}



/* Parsley.js (controllo errori nei form)
-------------------------------------------------------------- */

input.parsley-success, textarea.parsley-success, select.parsley-success {
	color: #468847 !important;
	background-color: #DFF0D8 !important;
	border: 1px solid #D6E9C6 !important;
}
input.parsley-error, textarea.parsley-error, select.parsley-error {
	color: #B94A48 !important;
	background-color: #F2DEDE !important;
	border: 1px solid #EED3D7 !important;
}
ul.parsley-error-list {
	font-size: 11px;
	margin: 2px;
	list-style-type:none; 
}
ul.parsley-error-list li {
	line-height: 16px;
}



/* Pines Notify
-------------------------------------------------------------- */

.ui-pnotify .alert {
	background: #4BBE87;
	border: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}
.ui-pnotify .alert,
.ui-pnotify .alert h4 {
	color: #fff;
	text-shadow: none;
}
.ui-pnotify .alert span {
	margin-top: 4px;
}
.ui-pnotify .alert h4 {
	margin: 0 0 5px;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
}



/* Bootstrap addons/overwrites
-------------------------------------------------------------- */

.btn-primary {
	text-transform: uppercase;
}
.btn-link, .btn-link:hover, .btn-link:focus {
	margin: 0;
	padding: 0;
	background: transparent;
	color: #4BBE87;
    text-decoration: underline;
}
.btn-link:hover, .btn-link:focus {
	color: #2ECC71;
    text-decoration: none;
}
legend .btn-link, legend .btn-link:hover, legend .btn-link:focus {
	margin: -3px 0 3px;
	font-size: 20px;
}
i.sx {
	width: 16px;
	margin-right: 10px;
}
i.dx {
	width: 16px;
	margin-left: 10px;
}
.help-block, .help-inline {
    color: #8FA7BF;
	font-size: 13px;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
	cursor: not-allowed;
	background-color: #f5f5f5;
	border: 2px solid #DCE4EC;
	color: #34495E;
}
.form-horizontal .dk_container {
    margin-bottom: 0;
}
input.input-block-level {
	display: block;
	height: 41px;
	line-height: 41px;
	padding: 8px 0 9px 10px;
}
.modal {
	color: #34495E;
}
hr {
	clear: both;
	margin: 40px 0;
    border-color: #34495E;
    border-width: 1px 0 0;
	color: #34495E;
}

/* Awesome Font fix */
a:hover [class^="icon-"]:before, a:hover [class*=" icon-"]:before,
button:hover [class^="icon-"]:before, button:hover [class*=" icon-"]:before,
.db-icon:hover [class^="icon-"]:before, .db-icon:hover [class*=" icon-"]:before,
.db-entry:hover [class^="icon-"]:before, .db-entry:hover [class*=" icon-"]:before {
    cursor: pointer;
}

/* Flat UI */
.tile, .share {
    background-color: #7A848E;
}
.share:before {
    border-color: transparent transparent #11181F;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background: #11181F;
	border: 2px solid #34495E;
    color: #fff;
}
.form-actions {
    background-color: #11181F;
    border-top: 1px solid #34495E;
}
legend {
    border-color: -moz-use-text-color -moz-use-text-color #34495E;
    color: #fff;
}
code, pre {
	background-color: #11181F;
    color: #fff;
}
.ui-page {
	display: none;
}



/* Parsley.js (form validation)
-------------------------------------------------------------- */

input.parsley-success, textarea.parsley-success, select.parsley-success {
	color: #468847 !important;
	background-color: #DFF0D8 !important;
	border: 1px solid #D6E9C6 !important;
}
input.parsley-error, textarea.parsley-error, select.parsley-error {
	color: #B94A48 !important;
	background-color: #F2DEDE !important;
	border: 1px solid #EED3D7 !important;
}
ul.parsley-error-list {
	font-size: 11px;
	margin: 2px;
	list-style-type:none; 
}
ul.parsley-error-list li {
	line-height: 16px;
}



/* Media Queries
-------------------------------------------------------------- */
/* usare per test:
body { background: #cf0; } */

@media (min-width: 980px) and (max-width: 1199px) {
	
}
@media (max-width: 979px) {

}
@media (max-width: 767px) {
	body.index {
		padding: 0;
	}
	#playback .container {
		padding: 0 20px;
	}
	select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
		height: 40px;
	}
	#currentartist {
		margin-top: 15px;
	}
}
@media (max-width: 479px) {
	img.logo {
		display: none;
	}
	#menu-top .playback-controls {
		left: 0;
		margin: 0;
	}
	#menu-bottom li a {
		font-size: 14px;
	}
	.playlist li, .database li {
		font-size: 15px;
	}
	.db-icon.db-browse, .playlist li:before {
		display: none;
	}
	#pl-filter-results {
		display: none;
	}
}
@media (max-width: 320px) {
    #menu-bottom li a {
		font-size: 30px;
	}
    #menu-bottom .sx {
        margin:0 auto;
    }
}

#menu-bottom li#open-panel-lib {
	display: none;
}

#lib-load {
	color: #DDDDDD;
	font-size: 18px;
	font-weight: bold;
	margin-left: -72px;
	position: absolute;
	top: 50%;
	left: 50%;
}

#lib-content {
	display: none;
    position: absolute;
    top: 40px;
    left: 0px;
    right: 0px;
    bottom: 40px;
}

#lib-genre {
    /*WARNING: overriden in js (volumio.library.js)*/
    position: absolute;
	overflow: auto;
	width: 25%;
	height: 25%;
	border-bottom: 3px solid #212D39;
    border-right: 3px solid #212D39;
	z-index: 12;
}
#lib-artist {
    /*WARNING: overriden in js (volumio.library.js)*/
    position: absolute;
	overflow: auto;
    top: 25%;
    width: 25%;
    height: 75%;
	margin-top: 3px;
    border-right: 3px solid #212D39;
	z-index: 12;
}
#lib-album {
    /*WARNING: overriden in js (volumio.library.js)*/
    position: absolute;
	overflow: auto;
    left: 25%;
	width: 25%;
	height: 100%;
    border-right: 3px solid #212D39;
    z-index: 11;
}
#lib-file {
    /*WARNING: overriden in js (volumio.library.js)*/
    position: absolute;
	overflow: auto;
    left: 50%;
	width: 50%;
	height: 100%;
    z-index: 10;
}

#lib-content ul {
	margin: 5px 2px;
}

#lib-content li {
	display: block;
	position: relative;
	margin: 0;
	border-bottom: 1px solid #111D29;
	cursor: pointer;
	color: #ddd;
	font-size: 13px;
	text-align: left;
	font-weight: bold;
}

#lib-content li div:hover {
	background-color: #7A848E;
}

#lib-content #lib-file li {
    cursor: default;
}

#lib-content #lib-file li div:hover {
	background-color: transparent;
}

#lib-content li div.active {
    background-color: #4BBE87;
}

#lib-content span {
	color: #14192E;
	font-size: 12px;
	font-weight: normal;
}

.lib-entry {
	margin-left: 4px;
}

.lib-entry .btn {
	font-size: 10px;
	height: 80%;
	line-height: 16px;
	margin-top: -5px;
	padding: 1px 3px;
}

.lib-entry .btn:hover {
	background-color: #1ABC9C;
}

.lib-play {
	position: absolute;
	top: 2px;
	right: 20px;
	height: 80%;
}

.lib-add {
	position: absolute;
	top: 2px;
	right: 1px;
	height: 80%;
}

.lib-showall {
	display: none;
}

.lib-playall, .lib-addall {
	position: fixed;
	bottom: 42px;
	opacity: 0.5;
}

.lib-playall:hover, .lib-addall:hover {
	opacity: 1;
}

.lib-playall {
	right: 92px;
}

.lib-addall {
	right: 52px;
}

/* Social Sharing Buttons */

.social {
    font-size: 20px;
	text-decoration: none;
	color: #eee;
	padding: 5px ;
}

#twbutton {
    text-decoration: none;
	padding-right: 10px;
}
#twbutton:hover {
    color: #4099FF;
}

#fbbutton {
    text-decoration: none;
}

#fbbutton:hover {
    color: #3b5998;
}

#gbutton {
    text-decoration: none;
	padding-left: 10px;
}

#gbutton:hover {
    color: #d34836;
    text-decoration: none;
}


.db-plugin li.active a {
	background: #4BBE87;
}
.db-plugin a {
	text-decoration: none;
	color: #fff;
}
.db-plugin a:hover, .db-plugin a:focus {
	text-decoration: none;
	outline: none;
	color: #fff;
}

.control-group.subgroup {
    margin-left: 100px;
}

#lib-tabs li.active a {
	background: #4BBE87;
}
#lib-tabs a {
	background: #7A848E;
	text-decoration: none;
	color: #fff;
    padding: 5px;
}
#lib-tabs a:hover, #aaa a:focus {
	text-decoration: none;
	outline: none;
	color: #fff;
}
#lib-content .tab-content {
    height: 100%;
}
